<template>
	<view class="main">
		<view class="content">
			<view class="item">
				<view class="title">头像</view>
			<!-- 	<view class="left">
					<u-upload
						width="50"
						height="50"
						accept="image"
						:maxCount="1"
						@afterRead="afterRead"
					>
						<u-avatar size="30" :src="userInfo.portrait"></u-avatar>
					</u-upload>
					<u-icon name="arrow-right" color="#FFFFFF"></u-icon>
				</view> -->
				<!-- "toPage('/pages/UserInfo/header')" -->
				<view  class="left">
							
					<u-avatar @click="uploadAvatar"  size="40"  :src="userInfo.portrait" shape="circle"></u-avatar>
					<!-- <u-icon name="arrow-right" color="#BBB"></u-icon> -->
				</view>	
					
			</view>
			<!-- <view class="item"> -->
				<!-- <view class="title">昵称</view>			 -->
			<!-- 	<view class="des" v-else><Input 
				:islabel="false" 
				placeholder="请输入您的昵称" 
				placeholder-style="color:#131415" 
				style="text-align: right;" 
				v-model="userInfo.nickname" 
				@blur="changeNick()"/></view> -->
			<!-- </view> -->
			<view class="item" @tap="toPage('/pages/UserInfo/modifyName')">
					<view class="title">昵称</view>
					<view class="left">
						<view class="des">{{userInfo.nickname}}</view>
						<u-icon name="arrow-right" color="#BBBBBB"></u-icon>
					</view>
				</view>
			
			<view class="item" @tap="toPage('/pages/UserInfo/mobile')">
				<view class="title">手机号</view>
				<view class="left">
				<view class="des">{{userInfo.mobile|formatMobile}}</view>
				<u-icon name="arrow-right" color="#BBB"></u-icon>					
				</view>
			</view>
		
			<view class="item">
				<view class="title">注册时间</view>
				<view class="des">{{userInfo.create_time}}</view>
			</view>
			<view class="item" @tap="go">
				<view class="title">实名认证</view>
				<view class="left">
					<view class="des" :class="{active:userInfo.real_name_status==2 && (Boolean(userInfo.is_face) || !userInfo.face_switch)}">
					{{userInfo.real_name_status|status}}
					</view>
					<u-icon name="arrow-right" color="#BBB"></u-icon>
				</view>
			</view>
			
			<!-- <view class="item" style="flex-direction: column; align-items: flex-start;">
				<view class="title">个人简介</view>
				<view class="des" v-if="userInfo.introduce && userInfo.introduce!=''" style="margin-top: 10rpx; font-weight: 500;">{{userInfo.introduce}}</view>
				<view class="des" style="width: calc(100% - 40rpx);" ><u--textarea placeholder="请输入您的个人简介" style="margin-top: 20rpx; height: 300rpx; width: 100%; font-weight: 500; border: none;" placeholder-style="color:#131415" v-model="introduce" ></u--textarea></view> 
			</view> -->
		
			<!-- <view class="item" @tap="toPage('/pages/UserInfo/blockchain')">
				<view class="title">区块链地址</view>
				<view class="left">
					<view class="des u-line-1" style="width: 300rpx;">{{userInfo.account_address}}</view>
					<u-icon name="arrow-right" color="#FFFFFF"></u-icon>
				</view>
			</view> -->
		</view>
		
		<!-- <u-button :loading="loading" @click="submint" class="btn">提交</u-button> -->
		
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import { mapState, mapMutations } from 'vuex'
	let self = null
	export default {
		mixins:[mixin],
		data() {
			return {
				introduce:'',
				loading:false,
				portrait:'',
				up:false,
			}
		},
		onReady() {
		},
		onLoad() {
		},
		onShow() {
			this.introduce=this.userInfo.introduce
		},
		computed: {
			...mapState(['userInfo'])
		},
		beforeCreate() {
			self = this
		},
		methods: {
			uploadAvatar() {
				// console.log(this.$refs.upload);
				// this.$refs.upload.click()
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (e) => {
						// this.uploadFilePromise(e.tempFilePaths[0])
						uni.uploadFile({
							url: this.$api.upimg,
							filePath: e.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								// uni.hideLoading();
								let result = JSON.parse(res.data).data.avatar;
								this.userInfo.portrait = result;
								if (result) {
									this.setMemberInfo({
										portrait: result
									})
								}
							},
							fail: (err) => {
								uni.$u.toast('头像上传失败');
							}
						});
					},
					fail() {
						this.$u.toast('获取图片失败')
					}
				})
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$api.upimg,
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log('[上传头像]',res)
							uni.hideLoading();
							let result = JSON.parse(res.data).msg							
							if(result){
								this.setMemberInfo({portrait:result})
							}
						},
						fail:(err)=>{
							uni.$u.toast('头像上传失败');
						}
					});
				})
			},
			//上传头像
			 afterRead(event) {
				console.log('[选择的图片]',event.file)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = event.file
				this.up=true
				// const result = await this.uploadFilePromise(lists.url)
				// console.log('[图片上传成功]',result)
				this.portrait=lists.url
				
			},
			go(){
				// if(this.userInfo.real_name_status==1||this.userInfo.real_name_status==2){
				// 	return
				// }
				this.toPage('/subpage/Verified/index')
			},
			//上传头像
			// async afterRead(event) {
			// 	console.log('[选择的图片]',event.file)
			// 	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			// 	let lists = event.file
			// 	uni.showLoading({
			// 	  title: '正在上传头像'
			// 	})
			// 	const result = await this.uploadFilePromise(lists.url)
			// 	console.log('[图片上传成功]',result)
			// 	if(result.url){
			// 		this.setMemberInfo({portrait:result.url})
			// 	}
			// },
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$api.upimg,
						filePath: url,
						name: 'file',
						success: (res) => {
							resolve(JSON.parse(res.data).data)
						},
						fail:(err)=>{
							uni.$u.toast('头像上传失败');
						}
					});
				})
			},
			changeNick(){
				this.loading = true
				this.setMemberInfo({nickname:this.userInfo.nickname})
			},
			changeIntroduce(){
			},
			submint(){
				if(this.introduce){
				this.loading=true
				this.setMemberInfo({introduce:this.introduce})
				}
			},
		},
		filters:{
			status(e){
				 // 0未提交 1待审核 2审核通过 3驳回
				if(e==3){
					return '未实名失败'
				}else if(e==1){
					return '认证中'
				}else if(e==2 && (Boolean(self.userInfo.is_face) || !self.userInfo.face_switch)){
					return '已实名'
				}else{
					return '去实名'
				}
			},
			formatMobile(e){
				if(e){
					var reg = /^(\d{3})\d*(\d{4})$/;
					return e.replace(reg,'$1****$2')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		// min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
		background-color:$nft-bg-color;
		.content{
			// background: #333333;
			// border-radius: 28rpx;
			// padding: 0 26rpx 0 34rpx;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-weight: 600;
				color: #000;
				line-height: 40rpx;
				padding: 34rpx 0;
				border-bottom: 1px solid #f5f5f5;
				::v-deep.u-icon__icon {
					display: none;
				}
				&:last-child{
					border-bottom: 0;
				}
				.left{
					display: flex;
					align-items: center;
				}
				.des{
					font-size: 28rpx;
					font-weight: 600;
					&.active{
						color: #468EFF;
					}
				}
				Input{
					border: none;
					:active{
						border: none;
					}
				}
			}
		}
		.btn{
			width: 694rpx;
			background: #468EFF;
			border-radius: 4rpx;
			margin:  10rpx atuo;
			height: 80rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			margin-top: 400rpx;
		}
	}
</style>
